<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas-demo</title>
  </head>
  <body>
    <canvas id="tutorial" width="300" height="300"></canvas>
    <script>
    //   function draw() {
    //     var canvas = document.getElementById("tutorial");
    //     if (!canvas.getContext) return;
    //     var ctx = canvas.getContext("2d"); //主要研究2d渲染
    //     ctx.fillStyle = "rgb(200,0,0)"; //背景色
    //     // 绘制矩形
    //     ctx.fillRect(10, 10, 55, 50); // 参数分别为 x y 坐标 宽度和高度
    //   }
    //   draw();

    // function draw(){
    // var canvas = document.getElementById('tutorial');
    // if (!canvas.getContext) return;
    // var ctx = canvas.getContext("2d");
    // ctx.beginPath(); //新建一条path
    // ctx.moveTo(50, 50); //把画笔移动到指定的坐标,也就是起始点坐标
    // ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
    // ctx.lineTo(200,200)
    // ctx.lineTo(50,200)
    // //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
    // ctx.closePath();  //会closePath
    // ctx.stroke(); //绘制路径。
    // ctx.fill() //填充颜色  默认黑色   如果path没有闭合，则fill()会自动闭合路径
    // }
    // draw();

    // function draw(){
    // var canvas = document.getElementById('tutorial');
    // if (!canvas.getContext) return;
    // var ctx = canvas.getContext("2d");
    // ctx.beginPath();
    // ctx.arc(50, 50, 40, 0, Math.PI / 4, false);   //x, y, r, startAngle, endAngle, anticlockwise(false顺时针 true逆时针)
    // ctx.stroke();
    // }
    // draw();

    // function draw(){
    // var canvas = document.getElementById('tutorial');
    // if (!canvas.getContext) return;
    // var ctx = canvas.getContext("2d");
    // ctx.beginPath();
    // ctx.moveTo(50, 50);
    //   //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
    // ctx.arcTo(200, 50, 200, 200, 50); //两个切点  半径
    // ctx.lineTo(200, 200)
    // ctx.stroke();
    
    // // ctx.beginPath();
    // // ctx.rect(50, 50, 10, 10);
    // // ctx.rect(200, 50, 10, 10)
    // // ctx.rect(200, 200, 10, 10)
    // // ctx.fill()
    // }
    // draw();

    //时钟案例
    init();
 
    function init(){
        let canvas = document.querySelector("#tutorial");
        let ctx = canvas.getContext("2d");
        draw(ctx);
    }
    
    function draw(ctx){
        requestAnimationFrame(function step(){
            drawDial(ctx); //绘制表盘
            drawAllHands(ctx); //绘制时分秒针
            requestAnimationFrame(step);
        });
    }
    /*绘制时分秒针*/
    function drawAllHands(ctx){
        let time = new Date();
    
        let s = time.getSeconds();
        let m = time.getMinutes();
        let h = time.getHours();
    
        let pi = Math.PI;
        let secondAngle = pi / 180 * 6 * s;  //计算出来s针的弧度
        let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度
        let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度
    
        drawHand(hourAngle, 60, 6, "red", ctx);  //绘制时针
        drawHand(minuteAngle, 106, 4, "green", ctx);  //绘制分针
        drawHand(secondAngle, 129, 2, "blue", ctx);  //绘制秒针
    }
    /*绘制时针、或分针、或秒针
    * 参数1：要绘制的针的角度
    * 参数2：要绘制的针的长度
    * 参数3：要绘制的针的宽度
    * 参数4：要绘制的针的颜色
    * 参数4：ctx
    * */
    function drawHand(angle, len, width, color, ctx){
        ctx.save();
        ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
        ctx.rotate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度
        ctx.beginPath();
        ctx.moveTo(-4, 0);
        ctx.lineTo(len, 0);  // 沿着x轴绘制针
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    
    /*绘制表盘*/
    function drawDial(ctx){
        let pi = Math.PI;
    
        ctx.clearRect(0, 0, 300, 300); //清除所有内容
        ctx.save();
    
        ctx.translate(150, 150); //一定坐标原点到原来的中心
        ctx.beginPath();
        ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
        ctx.stroke();
        ctx.closePath();
    
        for (let i = 0; i < 60; i++){//绘制刻度。
            ctx.save();
            ctx.rotate(-pi / 2 + i * pi / 30);  //旋转坐标轴。坐标轴x的正方形从 向上开始算起
            ctx.beginPath();
            ctx.moveTo(110, 0);
            ctx.lineTo(140, 0);
            ctx.lineWidth = i % 5 ? 2 : 4;
            ctx.strokeStyle = i % 5 ? "blue" : "red";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        ctx.restore();
    }
    </script>
  </body>
</html>
